<template>
	<view>
		<view class="ranking">
			<me-tabs style="border-top-left-radius:20rpx ;border-top-right-radius: 20rpx;" v-model="tabIndex" :tabs="tabs"
			 @change="tabChange" :height="80" nameKey="title"></me-tabs>
			<view class="selfinfo">
				<view>我的<br>排行</view>
				<image :src="userinfo.avatar" mode="scaleToFill"></image>
				<view class="nickname">{{userinfo.nickname}}</view>
				<view>{{dataself && dataself.index >0?'第'+dataself.index+'名':'未上榜'}}</view>
				<view class="money">{{dataself && dataself.num >0?dataself.num:0}}</view>
			</view>
			<view class="tabletitle">
				<view class="ranking-user">
					<view class="ranktitle">{{subTitle[0]}}</view>
					<view class="useritem">{{subTitle[1]}}</view>
				</view>
				<view class="money">{{subTitle[2]}}</view>
			</view>

			<mescroll-uni ref="mescrollRef" top="600" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			 :up="upOption">
				<view class="rankingitem" v-for="(item,index) in datainfo" :key="index">
					<view class="rankleft">
						<view class="ranklevel">
							<image v-if="index<3" :src="'/static/image/ttylranking'+index+'.png'" mode="aspectFill"></image>
							<view v-else>{{index+1}}</view>
						</view>
						<view class="userinfo">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="usernickname">{{item.nickname}}</view>
						</view>
					</view>
					<view class="rankright">
						<view class="money">{{item.num}}</view>
					</view>
				</view>
				<view class="button" @click="gotopage('/pages/bonus/bonus')" v-if="show_extension && !islogin">
					获取更多收益
				</view>
				<view class="showcount" v-if="datainfo.length>0">
					<text>-- 仅展示前{{datainfo.length}}名 --</text>
				</view>
				<view v-if="is_empty" class="empty">
					<image src="/static/image/mescroll-empty.png" mode="aspectFill"></image>
				</view>
				<complaint bottomType='ranking'></complaint>
			</mescroll-uni>

		</view>
	</view>
</template>

<script>
	// 排行版
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				islogin:false,
				show_extension:false,//显示/隐藏推广收益
				subTitle:['-','-','-'],
				is_empty: false,
				userinfo: '', //用户信息
				datainfo: [], //排行列表
				dataself: {
					index: 1,
					num: '0'
				}, //自己的排行
				globaldata: '',
				tabIndex: 0, // 当前菜单下标
				tabs: ['发起排行', '中奖排行', '金币排行'],
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中 ...",
					textNoMore: "-- 人家是有底线的 --",
					use: false,
				},
				downOption: {
					use: true,
					autoShowLoading: true,
					empty: {
						tip: '~ 搜索无数据 ~', // 提示 
						btnText: ''
					}
				}
			}
		},
		onLoad(option) {
			//更新app图标红点
			this.$redpoint(option);
			//console.log(this.$Logintip())
			this.islogin = this.$Logintip() 
		},
		methods: {
			downCallback() {
				this.getinitdata().then(res => {
					console.log(res.sred); //发送红包排行榜
					this.getmember() // 获取用户信息
					this.mescroll.endSuccess(res.sred.length)
					this.tabs = res.tabArr 
					//console.log(this.tabs) 
					//下拉重置tab索引
					this.tabIndex = 0
					//显示排行数据
					this.tabChange(this.tabIndex)
					if (res.sred.length == 0) {
						this.is_empty = true
					} else {
						this.is_empty = false
					}
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg('error::' + JSON.stringify(error))
					console.log(error)
				})
			},
			getmember() {
				let user_info = uni.getStorageSync('user_info')
				this.userinfo = user_info ? user_info : this.$Initdata
			},
			upCallback(page) {

			},
			tabChange(e) {
				console.log(e,this.tabIndex)
				let currentData =this.tabs[e];
				if (currentData.type == 'com_display'){
					this.datainfo = this.globaldata.com
					this.dataself = this.globaldata.self_com
					this.subTitle = currentData.subTitle
				}else if (currentData.type == 'sred_display') {
					//发排行
					this.datainfo = this.globaldata.sred
					this.dataself = this.globaldata.self_sred
					this.subTitle = currentData.subTitle
				} else if (currentData.type == 'gred_display') {
					//中奖排行
					this.datainfo = this.globaldata.gred
					this.dataself = this.globaldata.self_gred
					this.subTitle = currentData.subTitle
				} else if (currentData.type=='ing_display') {
					//金币排行
					this.datainfo = this.globaldata.ing
					this.dataself = this.globaldata.self_ing
					this.subTitle = currentData.subTitle
				}

				if (this.datainfo.length == 0) {
					this.is_empty = true
				} else {
					this.is_empty = false
				}
				
				//是否出现推广收益按钮
			 	if(currentData.type == 'com_display'){
					this.show_extension =true
				}else{
					this.show_extension = false
				}
			},
			getinitdata() {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: '/index/rank',
						param: ''
					}).then((res) => {
						console.log(res)
						if (res.status === 10000) {
							this.globaldata = res.data
							resolve(res.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					})
				})
			},
			gotopage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url(../../static/image/ranking.png);
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 365rpx;
	}
	.button{
		width: 50%;
		height: 80rpx;
		background-color: $uni-color-primary;
		font-size: 32rpx;
		color: #fff;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		margin-top: 45rpx;
	}
	//显示排名数字
	.showcount {
		width: 100%;
		padding: 30rpx 0;
		padding-top:45rpx ;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 45rpx;
		flex-direction: column;
		color: #a1a1a1;
		font-size: 25rpx;

		.time {
			color: $uni-color-primary;
		}
	}

	.empty {
		width: 100%;
		height: 50vh;
		display: flex;
		justify-content: center;
		align-items: center;
	
		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.ranking {
		padding: 10rpx 0;
		margin-top: 280rpx;
		width: 100%;
		height: auto;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #fff;
		color: #474747;

		.rankingitem {
			margin: 30rpx auto;
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;

			.rankleft {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.ranklevel {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0 20rpx;

					width: 40rpx;
					font-weight: bold;
					color: #afb0b2;

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.userinfo {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					image {
						margin: 0 30rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 80%;
					}

					.usernickname {
						color: #808080;
					}
				}
			}

			.rankright {
				display: flex;
				justify-content: center;
				align-items: center;

				.money {
					font-weight: bold;
					color: #fda457;
				}
			}
		}

		.tabletitle {
			padding: 20rpx 0;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #e6e6e6;
			margin: 0 auto;
			width: 90%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 35rpx;
			font-weight: bold;

			.ranking-user {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				.ranktitle{
					margin-left: 10rpx;
				}
				.useritem {
					margin-left: 100rpx; 
				}
			}

		}

		.selfinfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 20rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			width: 85%;
			font-size: 28rpx;
			// border: 1rpx solid $uni-color-primary;
			// background-color: #e9f2ff;
			border-radius: 20rpx;

			image {
				border: 1rpx solid #fff;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.nickname {
				font-weight: bold;
			}

			.money {
				font-weight: bold;
				color: $uni-color-primary;
			}
		}
	}
</style>
